<template>
  <Modal v-model="show" title="组织机构人员信息" :width="1300">
    <Table border :columns="columns" :data="data" row-key="id">
      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total"
                      :items-per-page="rows" @page-click="queryUsers"
                      :show-page-size="5" force-ellipses/>
        </div>
      </template>

      <template #locked="{ row, index }">
        <Tag color="primary" v-if="row.state">否</Tag>
        <Tag color="error" v-else>否</Tag>
      </template>
    </Table>
  </Modal>
</template>
<script>
import {defineComponent} from 'vue'
import DotTag from "@/components/DotTag.vue";
import VanPagination from "@/components/VanPagination.vue";

export default defineComponent({
  props: {
    orgId: {type: Number, required: false}, // 组织机构ID
    modelValue: {type: Boolean, required: true} //
  },
  data() {
    return {
      page: 1,
      total: 0 ,
      rows: 10 ,
      columns: [
        {title: '用户名', key: 'username', tree: true},
        {title: '手机号', key: 'tel'},
        {title: '真实姓名', key: 'realName'},
        {title: '职务', key: 'positions'},
        {title: '电子邮箱', key: 'email', width: 220},
        {title: '角色', key: 'roleNames', width: 250},
        {title: '锁定', slot: 'locked', width: 100},
        {title: '注册时间', key: 'createTime', width: 170, align: "center"},
      ],
      data: [],
    }
  },
  emits: ["update:model-value"],
  components: {VanPagination, DotTag},
  created() {
    this.queryUsers() ;
  },
  methods: {
    queryUsers() {
      this.$api.queryUsersByOrganization(this.orgId).then(ret=> {
        this.data = ret.data.data.list ;
        this.total = ret.data.data.total ;
      })
    },
  },
  computed: {
    show: {
      set(newVal) {
        this.$emit("update:model-value", newVal);
      },
      get() {
        return this.modelValue;
      }
    },
  }
})
</script>


<style scoped>

</style>